<template>
  <div class="app-container">
    课程列表 



 
 
<!--查询表单-->
 
<el-form :inline="true" class="demo-form-inline">
 
 
  <!-- 所属分类：级联下拉列表 -->
 
  <!-- 一级分类 -->
 
  <el-form-item label="课程类别">
 
  
 
 
    <!-- 二级分类 -->
 
    <el-select v-model="searchObj.subjectId" placeholder="请选择">
 
 
 
    </el-select>
 
  </el-form-item>
 
 
  <!-- 标题 -->
 
  <el-form-item>
 
    <el-input v-model="searchObj.title" placeholder="课程标题"/>
 
  </el-form-item>
 
  <!-- 讲师 -->
 
  <el-form-item>
 
    <el-select
 
      v-model="searchObj.teacherId"
 
      placeholder="请选择讲师">
 
 
 
    </el-select>
 
  </el-form-item>
 
 
  <el-button type="primary" icon="el-icon-search"  >查询</el-button>
 
  <el-button type="default"  >清空</el-button>
 
</el-form>

     <!-- 表格 -->
 
    <el-table
  
 
      :data="list"
 
      element-loading-text="数据加载中"
 
      border
 
      fit
 
      highlight-current-row>
 
 
      <el-table-column
 
        label="序号"
 
        width="70"
 
        align="center">
 
        <template slot-scope="scope">
 
          {{ (page - 1) * limit + scope.$index + 1 }}
 
        </template>
 
      </el-table-column>
 
 
      <el-table-column prop="title" label="名称" width="80" />
 
 
      <el-table-column prop="lessonNum"  label ="课程数" width="80" />
  
 <el-table-column prop="intro" label="资历" />
    
 
 
 
 
 
      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
 
      <el-table-column label="操作" width="200" align="center">
 
        <template slot-scope="scope">

    
            <!--隐藏路由-->
            <router-link :to="'/edu/course/info/'+scope.row.id">
    
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
    
            </router-link>
    
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteId(scope.row.id)">删除</el-button>
    
            </template>
 
      </el-table-column>
 
    </el-table>



   <!-- 分页 -->
 
    <el-pagination
 
      :current-page="page"
 
      :page-size="limit"
 
      :total="total"
 
      style="padding: 30px 0; text-align: center;"
 
      layout="total, prev, pager, next, jumper"
 
      @current-change="getCourseList"
 
    />










  </div>
</template>
 

 
<script>
 
import course from '@/api/course/course'
 
 
 
export default {
 
 
  data() {
 
    return {
 
     
 
      list: null, // 数据列表
 
      total: 0, // 总记录数
 
      page: 1, // 页码
 
      limit: 10, // 每页记录数
 
      searchObj: {
 
        subjectParentId: '',
 
        subjectId: '',
 
        title: '',
 
        teacherId: ''
  
      }, // 查询条件
 
      courseList: [], // 讲师列表
 
 
    }
 
  },
 
 
  created() { // 当页面加载时获取数据
 
    this.getCourseList()
 
 
 
  },
 
 
  methods: {
 
    getCourseList(page = 1) { // 调用api层获取数据库中的数据
 
      console.log('加载列表')
 
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
 
      // 解决分页无效问题
 
      this.page = page
 
      this.listLoading = true
 
      course.getPageList(this.page, this.limit, this.searchObj).then(response => {
 
        // debugger 设置断点调试
 
        if (response.success === true) {
 
          this.list = response.data.rows
 
          this.total = response.data.total
 
        }
 
        this.listLoading = false
 
      })
 
    },

   deleteId(Id){
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',   
          type: 'warning'})
          .then(() => {
              course.deletecourse(Id).then(response=>{
                  this.$message({             
                    type: 'success',
                     message: '删除成功!'
                  })
                    this.getCourseList() 
                })
 
                }).catch((response) => { // 失败
 
                   if (response === 'cancel') {
        
                        this.$message({
        
                         type: 'info',
        
                         message: '已取消删除'
        
                        })
        
                    } else {
        
                       this.$message({
        
                          type: 'error',
        
                          message: '删除失败'
        
                       })
        
                    }   
 
                 })
 
 
 
 
 
 
 
 
  }
 }
}
 
</script>